<div class="col-md-12">
  <div class="row row-space">
    <div class="col-md-12 ">
      <div class="panel panel-default">

        <div class="panel-heading">
          <b> Auditing Filters
            <a href="{{ auditingWiki }}" class="btn btn-trasparent btn-help"
               data-placement="right"
               target="_blank"
               data-title="Help"
               data-trigger="hover"
               data-animation="am-flip-x"
               bs-tooltip>
              <i class="fa fa-question-circle fa-lg"></i>
            </a>
          </b>
        </div>


        <div class="panel-body">
          <form name="form" ng-submit="filter()">
            <div class="form-group">
              <div class="row">
                <div class="col-md-3">
                  <label>User</label>
                  <input type="text" class="form-control" ng-model="query.user">
                </div>
                <div class="col-md-3">
                  <label>Operation</label>
                  <select class="form-control" ng-model="query.operation">
                    <option value="-2">--Select Operation--</option>
                    <option value="3">Create</option>
                    <option value="0">Read</option>
                    <option value="1">Update</option>
                    <option value="2">Delete</option>
                    <option value="4">Command</option>
                    <option value="5">Create class</option>
                    <option value="6">Drop class</option>
                    <option value="7">Config Changed</option>
                    <option value="8">Node Joined</option>
                    <option value="9">Node Left</option>
                    <option value="10">Security Module</option>
                    <option value="11">Security component reloaded</option>
                  </select>
                </div>

                <div class="col-md-3">
                  <label>Database </label>
                  <select id="databasesOnline" ng-model="query.db" class="form-control"
                          ng-options="db for db in databases"
                          data-placeholder="Pick a Database">
                  </select>
                </div>

                <div class="col-md-3">
                  <label>Record</label>
                  <input type="text" class="form-control" ng-model="query.record">
                </div>


              </div>
              <div class="row row-space">

                <div class="col-md-3">
                  <label>Date from</label>

                  <div class="input-group date">
                    <input type="text" class="form-control" ng-model="query.fromDate"
                           data-date-format="dd/MM/yyyy" data-autoclose="1" data-date-type="number"
                           data-max-date="today"
                           name="date1" bs-datepicker>

                <span class="input-group-btn">
                    <button class="btn btn-default">
                      <i class="fa fa-calendar">
                      </i>
                    </button>
                </span>
                    <input data-time-format="HH:mm" class="form-control" data-time-type="number" bs-timepicker
                           ng-model='query.fromDate' type="text"/>
              <span class="input-group-btn">
                  <button class="btn btn-default">
                    <i class="fa fa-clock-o">
                    </i>
                  </button>
              </span>
                  </div>

                </div>
                <div class="col-md-3">
                  <label>Note</label>
                  <input type="text" class="form-control" ng-model="query.note">
                </div>
                <div class="col-md-3">
                  <label>Date To</label>


                  <div class="input-group date">

                    <input type="text" class="form-control" ng-model="query.toDate"
                           data-date-format="dd/MM/yyyy" data-autoclose="1" data-date-type="number"
                           data-max-date="today"
                           name="date2" bs-datepicker>
                <span class="input-group-btn">
                    <button class="btn btn-default">
                      <i class="fa fa-calendar">
                      </i>
                    </button>
                </span>
                    <input data-time-format="HH:mm" class="form-control" data-time-type="number" bs-timepicker
                           ng-model='query.toDate' type="text"/>
                <span class="input-group-btn">
                <button class="btn btn-default">
                  <i class="fa fa-clock-o">
                  </i>
                </button>
                </span>
                  </div>
                </div>
                <div class="col-md-3">
                  <label>Limit</label>
                  <input type="number" class="form-control" ng-model="query.limit">
                </div>
                <div class="col-md-4 col-md-offset-8">
                  <br/>
                  <div class="pull-right">
                    <div class="btn-group">
                      <button class="btn btn-sm btn-default" ng-click="resetFilter()"><i class="fa fa-eraser"> </i>
                        Clear
                      </button>
                    </div>
                    <div class="btn-group">
                      <button class="btn btn-sm btn-default" type="submit"><i class="fa fa-search"> </i>
                        Search
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="row row-space">
    <div class="col-md-12">
      <table st-table="displayedLogs" st-safe-src="logs" class="table">
        <thead>
        <tr>
          <th>
            User
          </th>
          <th>
            Date
          </th>
          <th>
            Operation
          </th>
          <th>
            Database
          </th>
          <th>
            Record
          </th>
          <th>
            Note
          </th>
          <th>
            Changes
          </th>
        </tr>
        </thead>

        <tbody>
        <tr ng-repeat="log in displayedLogs">
          <td>
            {{log.username}}
          </td>
          <td>
            {{log.date | formatDate}}
          </td>
          <td>
            {{log.operation | operation}}
          </td>
          <td>
            {{log.database}}
          </td>
          <td>
            {{log.record}}
          </td>
          <td>
            {{log.note}}
          </td>
          <td>
            {{log.changes}}
          </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td colspan="7" class="text-center">
            <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages=""></div>
          </td>
        </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>
